import Vue from 'vue'
import MessageBox from './messageBox/messageBox.vue'
export const messageBox = (function() {

	return function(opt) {
		//放到function当中 defaults就是独立的
		var defaults = {//默认配置
			title: '',
			content: '',
			cancel: '',
			ok: '',
			handleCancel: null,
			handleOk: null
		};
		//扩展自定义弹框组件
		let MyComponent = Vue.extend(MessageBox)//将组件对象扩展 并保存为MyComponent
		//用户自定义配置
		for (let attr in opt) {
			defaults[attr] = opt[attr]
		}
		//
		let vm = new MyComponent({//里面相当于是一个vue
			el: document.createElement('div'), //生命周期中提到了会不会把这个div渲染 ：不会， template生命周期的运行原理，如果template有这个选项的时候我们会把这个el覆盖掉
			data: {
				title: defaults.title,
				content: defaults.content,
				cancel: defaults.cancel,
				ok: defaults.ok
			},
			methods: {
				handleCancel() {//在函数里面doSomeThing...
					defaults.handleCancel &&
						defaults.handleCancel.call(this) //需要拿到我们vm组件中的对象 改变this指向
					document.body.removeChild(vm.$el)
				},
				handleOk() {//在函数里面doSomeThing...
					defaults.handleOk &&//判断是否有handleOk 改变this指向并调用函数
						defaults.handleOk.call(this) //需要拿到我们vm组件中的对象 改变this指向
					document.body.removeChild(vm.$el)
				}
			}
		});
		document.body.appendChild(vm.$el)
	}

})()
